<template>
  <div class="grid grid-cols-2 ml-20 w-[500px]">
    <div class="border border-red-500 bg-slate-200 w-[200px] h-[200px] rounded-md shadow-md mt-20 flex items-center justify-center flex-col">
      <el-button type="primary" @click="click">EL Button</el-button>
      <div class="mt-10 flex items-center justify-center">
        EL Icon
        <el-icon><Edit /></el-icon>
      </div>
    </div>
    <div class="border border-red-500 bg-slate-200 w-[200px] h-[200px] rounded-md shadow-md mt-20 flex items-center justify-center">Test Tailwind</div>
    <div class="bg-slate-200 w-[200px] h-[200px] rounded-md shadow-md mt-20 flex items-center justify-center">{{ testStore.msg }}</div>
    <div class="bg-slate-200 w-[200px] h-[200px] rounded-md shadow-md mt-20 flex items-center justify-center">
      <div>
        <button class="btn btn-primary">DaisyUI</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useTestStore } from '@/store/TestStore'
import { ElMessage } from 'element-plus'
import { onMounted } from 'vue'

const testStore = useTestStore()

const click = () => ElMessage.success('测试成功')

onMounted(() => {
  testStore.testPinia()
})
</script>
